<template>
	<van-button type="primary" size="small" v-show="componentModel.editable" @click="onAddClickHandler">增加</van-button>
	<van-row style="width: 100%;margin-top:10px;border-bottom: 1px solid #ddd;" v-for="(item,index) in data" :key="index">
		<van-col :span="fieldSpan" v-if="componentModel.editable==true">
			<mobile-component-factory :componentModel="childComponentModel"
				v-for="(childComponentModel) in componentModel.children" :key="childComponentModel.id" :rowData="item">
			</mobile-component-factory>
		</van-col>
		<mobile-component-factory :componentModel="childComponentModel" v-else-if="componentModel.editable==false"
			v-for="(childComponentModel) in componentModel.children" :key="childComponentModel.id" :rowData="item">
		</mobile-component-factory>
		<van-col :span="buttonSpan" v-if="componentModel.editable==true">
			<van-button type="primary" size="small" v-show="componentModel.editable" @click="onEditClickHandler(index)">
				编辑</van-button>
			<van-button type="primary" size="small" v-show="componentModel.editable"
				@click="onDeleteClickHandler(index)" style="margin-left: 10px;">删除</van-button>
		</van-col>
	</van-row>
	<van-popup v-model:show="popupShow" closeable :style="{ height: '100%',width:'100%' }" :lazy-render="false">
		<mobile-page-component ref="pageComponent"></mobile-page-component>
		<van-button @click="onDetailOKClickHandler">确定</van-button>
	</van-popup>
	<van-pagination v-model="currentPage" :total-items="total" :items-per-page="componentModel.pageSize" v-show="componentModel.pageable" @change="onChangeHandler"/>
</template>

<script>
	import utils from '@/utils/utils.js';
	import {
		sendComponentEventRequest
	} from '@/utils/requestUtils.js';
	import {
		getPageData
	} from '@/utils/pageUtils.js';
	import {
		Dialog
	} from 'vant';
	export default {
		name: "ListViewComponent",
		props: ["componentModel"],
		beforeMount() {
			if(this.componentModel.editable==false){
				this.fieldSpan=24;
			}
		},
		data() {
			return {
				data: [],
				popupShow: false,
				isNew: false,
				currentRowIndex: -1,
				currentFormData: {},
				fieldSpan:16,
				buttonSpan:8,
				total:0,
				currentPage:1,
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			setProp(prop) {
				for (var k in prop) {
					if (k == "tableData") {
						var selectItemMap = prop["selectItemMap"];
						var tableData = prop[k];
						if (tableData != null) {
							if (tableData["total"] != this.total) {
								this.total = tableData["total"];
							}
							var data = tableData.data;
							for (var i = 0; i < data.length; i++) {
								data[i]["selectItemMap"] = selectItemMap;
							}
							this.data=[];
							this.$nextTick(function(){
								this.data = data;
							});
						}
					}
				}
			},
			onAddClickHandler() {
				this.popupShow = true;
				this.isNew = true;
				var pageComponent=utils.getPageComponent(this);
				var parentCode=pageComponent.componentModel.code;
				var data=getPageData(pageComponent,this.children);
				var dataJsonString=encodeURIComponent(JSON.stringify(data));
				this.$refs.pageComponent.navigatePage(this.componentModel.formPageCode, {"action":"dataNew","parentCode":parentCode,"parentData":dataJsonString},true);
			},
			onDetailOKClickHandler() {
				this.popupShow = false;
				var data = this.getPageSubmitData(this.$refs.pageComponent, this.children);
				data[this.componentModel.id + "__isnew"] = this.isNew;
				sendComponentEventRequest(this, "detailOK", data);
			},
			getPageSubmitData(pageComponent, children) {
				var data = {};
				for (var i = 0; i < children.length; i++){
					if(children[i].componentModel==undefined)continue;
					if (utils.startWith(children[i].componentModel.id, pageComponent.componentModel.code)) {
						if (children[i]["getValue"] != undefined) {
							var value = children[i]["getValue"]();
							if (value != undefined) {
								data[children[i].componentModel.id] = value;
							}
						} else if (children[i]["getState"] != undefined) {
							var state = children[i]["getState"]();
							if (state != undefined) {
								for (var k in state) {
									data[k] = state[k];
								}
							}
						}
					}
				}
				return data;
			},
			addRow(data) {
				data["_dirty"] = true;
				this.data.push(data);
			},
			onDeleteClickHandler(index) {
				Dialog.confirm({
						title: '提示',
						message: "确定要删除吗？",
					})
					.then(() => {
						this.currentRowIndex = index;
						var id = this.data[index][this.componentModel.keyColumnName];
						if (id == undefined) {
							id = "";
						}
						sendComponentEventRequest(this, "removeRowEvent", {
							"id": id
						});
					})
					.catch(() => {
						// on cancel
					});
			},
			onEditClickHandler(index) {
				this.currentRowIndex = index;
				this.popupShow = true;
				this.isNew = false;
				var submitData = this.data[index];
				var data = {
					"id": submitData[this.componentModel.keyColumnName]
				};
				for (var k in submitData) {
					if (k != "selectItemMap") {
						data["___" + k] = submitData[k];
					}
				}
				data["action"] = "dataEdit";
				
				var pageComponent=utils.getPageComponent(this);
				var parentCode=pageComponent.componentModel.code;
				var parentData=getPageData(pageComponent,this.children);
				var dataJsonString=encodeURIComponent(JSON.stringify(parentData));
				
				data["parentCode"]=parentCode;
				data["parentData"]=dataJsonString;
				this.$refs.pageComponent.navigatePage(this.componentModel.formPageCode, data,true);
			},
			removeRow() {
				this.data.splice(this.currentRowIndex, 1);
			},
			updateRow(dataMap) {
				dataMap["_dirty"] = true;
				var temp = utils.deepCopy(this.data);
				temp.splice(this.currentRowIndex, 1, dataMap);
				this.data=[];
				this.$nextTick(function(){
					this.data = temp;
				});
			},getState(){
				var dataArray=[];
				for(var i=0;i<this.data.length;i++){
					if(this.data[i]["_dirty"]==true){
						var dataMap={};
						dataArray.push(dataMap);
						for(var k in this.data[i]){
							if(k=="selectItemMap" || k=="_dirty"){
								continue;
							}
							dataMap[k]=this.data[i][k];
						}
					}
				}
				if(dataArray.length>0){
					var sumbmitData = {};
					sumbmitData[this.componentModel.id + "_data"] = JSON.stringify(dataArray);
					return sumbmitData;
				}
			},onChangeHandler(){
				var data={};
				data[this.componentModel.id+"_page"]=this.currentPage;
				sendComponentEventRequest(this, "paginationEvent",data);
			}
		},
	}
</script>

<style>
</style>
